<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div class="mychart" style="height:400px; width:80%;margin: 100px auto;"></div>
</body>
<script src="../jquery.min.js"></script>
<script src="echart.js/echarts.min.js"></script>
<script>
    var mychart = echarts.init($(".mychart")[0])

    var option = {
        backgroundColor:'rgba(255,0,0,)',//背景颜色
        color:['#87cefa',"#666",'#faa'],  //图表颜色
        renderAsImage:'true',  //图片渲染
        calculable:true,   //拖拽特性
        animation:true,  //初始化动画特性
        title: {

            text: '某地区蒸发量和降水量(主标题)',  //'\n'指定换行
            subtext: '纯属虚构(副标题)',   //副标题
        },

        legend: {
            // data: ['蒸发量', '','降水量']
            //图例内容数组，数组项通常为{string}，每一项代表一个系列series的name，默认布局到达边缘会自动分行（列），传入空字符串''可实现手动分行（列）。
            // 使用根据该值索引series中同名系列所用的图表类型和itemStyle，如果索引不到，该item将默认为没启用状态。
            //如需个性化图例文字样式，可把数组项改为{Object}，指定文本样式和个性化图例icon，格式为
            // {
            //     name : {string},
            //     textStyle : {Object},
            //     icon : {string}
            // }
            data:[
                {  name:'蒸发量',
                    textStyle:{
                        fontSize:12,
                        fontWeight:'bolder',
                        color:'#cccccc'
                    },
                    icon:'image://./自定义iconimage/comments.png'//格式为'image://+icon文件地址'，其中image::后的//不能省略
                },
                {  name:'降水量',
                    textStyle:{
                        fontSize:12,
                        fontWeight:'bolder',
                        color:'#cccccc'
                    },
                    icon:'image://./自定义iconimage/more_unfold.png'//格式为'image://+icon文件地址'，其中image::后的//不能省略
                }
            ],

            // show:false,  //是否显示图列
            //  zlevel:1, //一级层叠控制。每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，。
            // z:4, 二级层叠控制,同一个canvas（相同zlevel）上z越高约靠顶层。
            orient:'horizontal',  //布局方式，默认为水平布局，可选为：'horizontal' | 'vertical'
            x:"",  // 水平安放位置，默认为全图居中，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）;
            y:'bottom',
            backgroundColor:'green',
            borderWidth:5,
            borderColor:'red',
            padding:10,  //图列离边框的内边距
            itemGap:20,   //各个item(两个name)之间的间隔，单位px，默认为10，横向布局时为水平间隔，纵向布局时为纵向间隔，见下图
            itemWidth: 40,  //图列lengend的宽高
            itemHeight: 30,
            textStyle: {
                fontFamily: 'Arial, Verdana',
                fontSize: 12,
                fontStyle: 'normal',
                fontWeight: 'normal',
            },
            selectedMode:'multiple', //选择模式，默认开启图例开关，可选single，multiple
            selected:{}  ,//配置默认选中状态，可配合LEGEND.SELECTED事件做动态数据载入，try this »
            // formatter:'aa',
            formatter:function () {
                return"搜索"
            },//文本格式器  string 或者function
        },
        grid:{
            zlevel: 0,
            zlevel: 0,
            z: 0,
            x: 100, //左内边距
            y: 60,  //上内边距
            x2: 80, //右内边距
            y2: 60, //下内边距   //可以写left bottom, top right 值可以为百分比

            // width: ,   坐标系的宽高
            // height:,
            backgroundColor: 'rgba(125, 128, 128, .3)',
            borderWidth: 10,
            borderColor: '#daa',
            containLabel:true,
        },
        tooltip: {
            //提示框组件
            trigger: 'axis',   //axis 坐标轴触发 ,item 图形触发
            //坐标轴指示器配置项
            axisPointer: {
                type: 'shadow',   //指示器类型  line 直线指示器, shadow 阴影指示器 cross  十字准星指示器。其实是种简写，表示启用两个正交的轴的 axisPointer。
                axis: 'auto'
            },
            //是否显示提示框浮层
            showContent:true,  //默认是true
            alwaysShowContent:false, //移除后一直显示
            //触发提示框的条件
            triggerOn:"mousemove",  //可选mousemove, click
            // showDelay:1000 , //延迟显示  ;
            // hideDelay:1000, //隐藏延迟
            enterable:true, //鼠标是否可进入提示框 , ,一般用于内交互
            confine:true , //是否将提示框限制在图标曲玉以为, 一般用于移动端
//             //自定义格式化
            //字符串模版
//              折线（区域）图、柱状（条形）图、K线图 : {a}（系列名称(series的name值蒸发量:{a0},降水量:{a1})），
//                                                  {b}（类目值(xAxis的值横坐标的值) {b0}对应第一系列,{b1}第二系列），
//                                                  {c}（数值(对应y轴的值)）, {d}（无）
//
//              散点图（气泡）图 : {a}（系列名称），{b}（数据名称），{c}（数值数组）, {d}（无）
//
//              地图 : {a}（系列名称），{b}（区域名称），{c}（合并数值）, {d}（无）
//
//              饼图、仪表盘、漏斗图: {a}（系列名称），{b}（数据项名称），{c}（数值）, {d}（百分比）
            //formatter:'{b0}: {c0}<br />{b1}: {c1}'
            //回调函数
// //             回调函数格式： (params: Object|Array, ticket: string, callback: (ticket: string, html: string)) => string
//             formatter:function () {
//                 return "a"
//             }

            //{
        //     componentType: 'series',
        //     // 系列类型
        //     seriesType: string,
        //     // 系列在传入的 option.series 中的 index
        //     seriesIndex: number,
        //     // 系列名称
        //     seriesName: string,
        //     // 数据名，类目名
        //     name: string,
        //     // 数据在传入的 data 数组中的 index
        //     dataIndex: number,
        //     // 传入的原始数据项
        //     data: Object,
        //     // 传入的数据值
        //     value: number|Array,
        //     // 数据图形的颜色
        //     color: string,
        //
        // }
            formatter: function (params, ticket, callback) {
                $.get('detail?name=' + params.name, function (content) {
                    callback(ticket, toHTML(content));   //合并ticket和content
                });
                return 'Loading';
            }
        },
        toolbox: {   //工具栏
            show: true,
            itemSize:30,
            feature: {
                //数据视图
                dataView: {show: true, readOnly: false},
                //动态切换
                magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
                //还原
                restore: {show: true},
                //保存图片
                saveAsImage: {
                    show: true,
                    type: 'png',
                    name: '江水',
                backgroundColor: 'auto',
                excludeComponents: ['toolbox'],  //保存时忽略toolbox
                show: true,
                title: '保存为图片1',
                    //自定义图标
               // icon: ...,
                },
                //控制键按钮组
                brush:{
                    type:['rect','polygon','lineY']
                }
            }
        },
        xAxis: [
            {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '蒸发量',
                type: 'bar',
                data: [2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3],
                markPoint: {
                    data: [
                        {type: 'max', name: '最大值'},
                        {type: 'min', name: '最小值'}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            },
            {
                name: '降水量',
                type: 'bar',
                data: [2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0, 2.3],
                markPoint: {
                    data: [
                        {name: '年最高', value: 182.2, xAxis: 7, yAxis: 183, symbolSize: 18},
                        {name: '年最低', value: 2.3, xAxis: 11, yAxis: 3}
                    ]
                },
                markLine: {
                    data: [
                        {type: 'average', name: '平均值'}
                    ]
                }
            }
        ]
    };
    mychart.setOption(option)


</script>
</html>